<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>
	<title>新东方导航</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		#d1 {
			width: 1000px;
		}
		
		#d2 {
			background-color: #EFEDEE;
			height: 30px;
			border: 1px #DDDDDD dashed;
			position: relative;
		}
		
		#d2 ul {
			list-style: none;
			/*background: url(img/logo.gif) no-repeat;*/
			padding: 5px 20px;
			display: inline-block;
		}
		
		#d2 ul li {
			display: inline-block;
			margin: 0 20px;
		}
		
		img,
		ul {
			vertical-align: middle;
		}
		
		#d2 img {
			margin: 0 90px 0 20px;
			height: 30px;
		}
		
		#d2 a {
			color: #797979;
			border-right: 1px solid #797979;
			padding-right: 30px;
			text-decoration: none;
		}
		
		#d2 ul li:last-of-type a {
			border: none;
			background: url(img/open_icon.gif) no-repeat 70px 2px;
		}
		
		#d3 {
			width: 220px;
			font-size: 14px;
			font-family: "微软雅黑";
			padding: 10px 20px;
			border: 1px solid #797979;
			position: absolute;
			top: 30px;
			left: 700px;
		}
		
		#d3 p {
			margin: 20px auto;
		}
		
		#d3 a {
			color: #797979;
			text-decoration: none;
			line-height: 1.5;
			padding: 6px
		}
		#d1 a:hover{
			color: blue;
		}
	</style>

	<body>
		<div id="d1">

			<div id="d2">
				<img src="img/logo.gif" />
				<ul>

					<li>
						<a href="#">购物车</a>
					</li>
					<li>
						<a href="#">优惠券</a>
					</li>
					<li>
						<a href="#">快速注卡</a>
					</li>

					<li>
						<a href="#">各地购课</a>
					</li>
					<li>
						<a href="#">手机报</a>
					</li>
					<li>
						<a href="#">网站导航</a>
					</li>
				</ul>
			</div>
			<div id="d3">
				<p>
					<a href="#">托福</a>
					<a href="#">雅思</a>
					<a href="#">考研</a>
					<a href="#">职称英语</a>
					<a href="#">初中</a>
					<a href="#">日语</a>

				</p>
				<hr />
				<p>
					<a href="#">网络课堂</a>
					<a href="#">资讯中心</a>
					<a href="#">知识堂</a>
					<a href="#">大师讲坛</a>
					<a href="#">学习论坛</a>
					<a href="#">学词 </a>
					<a href="#">考研搜校</a>

				</p>
				<hr />

				<p>
					<a href="#">M-Zone</a>
					<a href="#">手机报</a>
					<a href="#">时时英语</a>
				</p>

			</div>

		</div>
	</body>

</html>